<template>
  <view class="content">
    <view class="mForm">
      <u-form :model="form" label-width="150rpx">
        <u-form-item label="新手机号" border-bottom>
          <u-input v-model="form.phone" type="number" placeholder="请输入手机号"></u-input>
        </u-form-item>
        <u-form-item label="验证码" @click="showEnd = true">
          <div class="flex-y-center">
            <div class="flex-w-1">
              <u-input
                v-model="form.verify_code"
                :maxlength="6"
                placeholder="验证码"
                type="number"
              >
              </u-input>
            </div>
            <div @click="getCode" class="u-m-l-20" style="color: #f0250e">
              {{ tips }}
            </div>
            <u-verification-code
              :seconds="60"
              ref="uCode"
              @change="codeChange"
            ></u-verification-code>
          </div>
        </u-form-item>
      </u-form>
    </view>

    <view class="submit" @click="submit">
      <view class="m-btn"> 提交</view>
    </view>
  </view>
</template>

<script>
import {updateTel} from '@/api/service-home'
export default {
  components: {
  },

  data() {
    return {
      dateParams: {
        hour: true,
        minute: true,
      },
      form: {
        phone: "",
        verify_code: "",
      },
      tips: "获取验证码",
    };
  },
  computed: {
    endDate: {
      get() {
        if (!this.form.end_date) {
          return "";
        }
        let dateArr = this.form.end_date.split(":");
        return {
          hour: dateArr[0],
          minute: dateArr[1],
        };
      },
      set(val) {
        this.form.end_date = `${val.hour}:${val.minute}`;
      },
    },
    startDate: {
      get() {
        if (!this.form.start_date) {
          return "";
        }
        let dateArr = this.form.start_date.split(":");
        return {
          hour: dateArr[0],
          minute: dateArr[1],
        };
      },
      set(val) {
        this.form.start_date = `${val.hour}:${val.minute}`;
      },
    },
  },

  onLoad(opi) {},

  methods: {
    async submit() {
      if(!this.$u.test.mobile(this.form.phone)) return this.$utils.toast('手机号不正确')
      if(!this.$u.test.code(this.form.verify_code)) return this.$utils.toast('验证码不正确')
      await updateTel(this.form, true)
      this.$utils.goBack();
    },
    codeChange(text) {
      this.tips = text;
    },
    async getCode() {
      if (!this.$u.test.mobile(this.form.phone))
        return this.$utils.toast("手机号错误");
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        await this.$allrequest.user.sms_code({
          phone: this.form.phone,
          code_type: "bind",
        }).catch(err => uni.hideLoading())
        uni.hideLoading();
        // 这里此提示会被this.start()方法中的提示覆盖
        this.$u.toast("验证码已发送");
        // 通知验证码组件内部开始倒计时
        this.$refs.uCode.start();
      } else {
        this.$u.toast("倒计时结束后再发送");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
}

.mFormItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100rpx;
  border-bottom: 1px solid #f1f1f1;

  &:last-of-type {
    border-bottom: 0;
  }
}

.mFormRig {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.mForm {
  margin-bottom: 12rpx;
  padding: 0 24rpx;
  background: #fff;

  .icon-arrow-right {
    margin-left: 10rpx;
  }

  .inp {
    width: 100%;

    input {
      height: 100rpx;
      line-height: 100rpx;
      font-size: 32rpx;
    }
  }
}

.des {
  padding: 8rpx 24rpx 0;
  color: #8c8c8c;
  font-size: 24rpx;
}

.m-btn {
  height: 80rpx;
  background: #f0250e;
  border-radius: 32px;
  text-align: center;
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}

.submit {
  padding: 80rpx 24rpx 0;
}
</style>
